<template>
  <div>
    <el-main>
      <el-row>
        <el-col :span="12" :xs="24">
          <div style="font-size: 24px; font-weight: bold; margin-bottom: 20px">
            添加走访
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="12" :xs="24">
                <el-form-item label="联系人">
                  <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="company_name">
                  <el-input v-model="form.mobile"></el-input>
                </el-form-item>
                <el-form-item label="地址" prop="company_name">
                  <el-input v-model="form.address"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12" :xs="24">
                <el-form-item label="职位" prop="company_name">
                  <el-input v-model="form.position"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="company_name">
                  <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="所属区域">
                  <el-select style="width: 100%" v-model="StreetId" placeholder="">
                    <el-option
                      v-for="item in StreetList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="名片">
              <el-upload
                :class="{ hide: hideUpload }"
                :action="action"
                :limit="1"
                :file-list="fileList"
                :before-upload="beforeAlbumUpload"
                :on-success="onSuccess"
                list-type="picture-card"
              >
                <!-- <i class="el-icon-plus"></i> -->
                <div slot="default" style="width: 100%; height: 100%">
                  <img
                    style="width: 100%; height: 100%; object-fit: cover"
                    src="@/assets/web/card2.png"
                  />
                </div>
                <div
                  slot="file"
                  slot-scope="{ file }"
                  v-loading="file.status == 'uploading'"
                >
                  <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                  <span class="el-upload-list__item-actions">
                    <span
                      class="el-upload-list__item-preview"
                      @click="handlePictureCardPreview(file)"
                    >
                      <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleDownload(file)"
                    >
                      <i class="el-icon-download"></i>
                    </span> -->
                    <span
                      v-if="!disabled"
                      class="el-upload-list__item-delete"
                      @click="handleRemove(file)"
                    >
                      <i class="el-icon-delete"></i>
                    </span>
                  </span>
                </div>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </el-form-item>
            <el-form-item label="企业标签" v-if="labelList.length > 0">
              <div v-if="defaultLabel.length > 0">
                <el-tag
                  @close="addLabel(item)"
                  v-for="item in defaultLabel"
                  :key="item.id"
                  class="b_bule"
                  >{{ item.name }}</el-tag
                >
              </div>
              <div v-if="form.enterprise.length > 0">
                <el-tag
                  closable
                  @close="addLabel(item)"
                  v-for="item in form.enterprise"
                  :key="item.id"
                  class="b_bule"
                >
                  {{ item.name }}</el-tag
                >
              </div>
              <el-button class="button_from_i" type="primary" round @click="addEnterprise"
                >{{ choose ? "保存标签 -" : "添加标签+" }}
              </el-button>
              <div v-if="choose">
                <div>请选择下列标签：</div>
                <span
                  v-for="item in labelList"
                  :key="item.id"
                  :class="{ b_bule: form.enterprise.indexOf(item) > -1 }"
                  class="addLabel b_choose"
                  @click="addLabel(item)"
                  >{{ item.name }}</span
                >
              </div>
            </el-form-item>
          </el-form>
          <div class="dialog-footer">
            <el-button type="primary" @click="preservation">添加</el-button>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </div>
</template>

<script>
import {
  labelTrue,
  staff,
  companyLabel,
  createVisit,
  pushUser,
  sendInfo,
  companyStreet,
  changeStreet,
  getBusinessCardInfo,
  companyInfo,
  companyEdit
} from "@/api/newuser";
import { VUE_APP_BASE_API } from "@/config.js";

export default {
  data() {
    return {
      id: this.$store.state.user.id,
      company_id: '',
      choose: false,
      Visit: false,
      // action: `${VUE_APP_BASE_API}/v1/common/file`,
      action: `https://patent.shundeip.com/v1/common/file`,

      SeachType: false,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      Visitpeoplelist: [],
      companyInfoData: {},
      form: {
        username: "",
        mobile: "",
        address: "",
        position: "",
        email: "",
        enterprise: [],
      },
      StreetId: "",
      defaultLabel: [],
      company: "",
      labelList: [],
      StreetList: [],
      fileList: [],
      hideUpload: "",
    };
  },
  watch: {},
  props: {},
  components: {},
  mounted() {
    this.staff();
    this.companyStreet();
    this.companyInfo(this.$route.query.company_id);

    this.company_id = this.$route.query.company_id
    labelTrue({ id: this.$route.query.company_id });
    companyLabel({ id: this.$route.query.company_id }).then((res) => {
      // console.log(res);
      this.defaultLabel = res.result;
      this.labelList = res.list;
      this.labelList.map((res_) => {
        res.label.map((res_1) => {
          if (res_.id == res_1.id) {
            this.form.enterprise.push(res_);
          }
        });
      });
    });
  },
  methods: {
    companyEdit() {

      let Label = [...this.defaultLabel]
      Label.push(...this.form.enterprise)

      Label = Label.map(res => {
        console.log(res);
        return res.id
      })


      let form = {
        company_id : this.company_id,
        label: Label.join(),
        street_id:this.StreetId,
        username:   this.form.username,
        position: this.form.position,
        address: this.form.address,
        mobile: this.form.mobile,
        email: this.form.email,
        business_card: this.fileList[0] ? this.fileList[0].url : ''
      }
      console.log(form);

      companyEdit(form).then(res => {
        this.$router.go(-1)
      })
    },
    companyInfo(id) {
      companyInfo({
        company_id: id,
      }).then((res) => {
        console.log(res, "res1236489");
        this.form.username = res.username;
        this.form.mobile = res.mobile;
        this.form.address = res.address;
        this.form.position = res.position;
        this.form.email = res.email;
        this.StreetId = res.street_id;

        if (res.business_card) {
          this.fileList.push({
            url: res.business_card,
          });
          this.hideUpload = true;
        }
      });
    },
    handleRemove(file) {
      this.hideUpload = false;
      console.log(file);
      // 1.获取将要删除图片的临时路径
      const filePath = file.url;
      // 2.从pics数组中，找到图片对应的索引值
      const i = this.fileList.findIndex((x) => x.url === filePath);
      // 3.调用splice方法，移除图片信息
      this.fileList.splice(i, 1);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    changeStreet(company) {
      if (!company) {
        this.StreetId = "";
        return;
      }
      changeStreet({ company: company }).then((res) => {
        this.StreetId = Number(res.street_id);
        console.log(this.StreetId, "this.form.StreetId");
      });
    },
    staff() {
      staff({
        id: this.id,
        type: 1,
      }).then((res) => {
        this.Visitpeoplelist = res;
      });
    },
    async companyStreet() {
      let data = await companyStreet();
      this.StreetList = data;
    },
    //保存
    preservation() {
      this.companyEdit()
    },

    addEnterprise() {
      this.choose = !this.choose;
    },
    addLabel(item) {
      let index = this.form.enterprise.indexOf(item);
      if (index == -1) {
        this.form.enterprise.push(item);
      } else {
        this.form.enterprise.splice(index, 1);
      }
    },

    beforeAlbumUpload(file) {
      //上传前验证
      const isIMG = file.type.slice(0, 5) === "image";
      if (!isIMG) {
        this.$message.error("请上传图片!");
      }
      return isIMG;
    },
    onSuccess(response, file, fileList) {
      this.hideUpload = true;
      this.fileList = fileList;

      getBusinessCardInfo({
        file_path: response.data.url,
      }).then((res) => {
        console.log(res, "res");
        this.form.username = res.name;
        this.form.mobile = res.phone;
        this.form.address = res.address;
        this.form.position = res.position;
        this.form.email = res.email;
        this.$message({
          message: "上传成功",
          type: "success",
        });
      });

      console.log(response, file, fileList, "上传成功");
    },
  },
};
</script>

<style scoped lang="less">
::v-deep .el-upload-list__item {
  .el-loading-parent--relative {
    width: 100%;
    height: 100%;
  }
}

::v-deep .hide .el-upload--picture-card {
  display: none;
}

.el-main {
  margin: 20px 15px;
}

.title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

::v-deep .upload-demo {
  .el-upload {
    width: 100%;
    .upload {
      width: 500px;
      height: 300px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

::v-deep .el-upload--picture-card {
  width: 520px;
  height: 320px;
}

.button_from_i {
  min-width: 125px;
  height: 38px;
  line-height: 0px;
  font-size: 14px;
  color: #3377ff;
  background-color: #ebf2ff;
  border: 1px solid #387dff;
}

.dialog-footer {
  margin-top: 30px;
  button {
    padding: 5px 30px;
    width: 139px;
    height: 38px;
    background: #387dff;
    border: 1px solid #e8ecef;
    border-radius: 19px;
    font-size: 14px;
  }
}

.b_bule {
  /*display: inline-block;*/
  background-color: #d3e2ff !important;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 0px 10px;
  color: #387dff;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  border: none !important;
}

.b_choose {
  display: inline-block;
  background-color: #ffffff;
  margin: 3px 5px;
  border-radius: 5px;
  padding: 0px 10px;
  color: #387dff;
  font-size: 12px;
  height: 22px;
  line-height: 20px;
  border: 1px solid #387dff;
  cursor: pointer;
}

::v-deep .el-table__row td:nth-child(6) .el-button {
  color: #23b899;
  background-color: #ecfaf7;
  border: none;
  font-size: 14px;
}

::v-deep input {
  border-radius: 38px;
  height: 38px;
  line-height: 38px;
}

::v-deep .el-input__icon {
  line-height: 38px;
  font-size: 16px;
}

.Visitdate {
  margin-top: 62px;
}

::v-deep .el-table__row td:nth-child(7) .el-button {
  color: #23b899;
  background-color: #ecfaf7;
  border: none;
}

::v-deep .el-dialog {
  border-radius: 10px;
}

::v-deep .el-dialog__header {
  .el-dialog__title {
    font-size: 22px;
    font-weight: bolder;
  }

  .el-dialog__headerbtn {
    i {
      position: absolute;
      border: 3px solid #fff;
      top: -50px;
      left: 30px;
      color: #fff;
      border-radius: 30px;
      font-size: 24px;
      font-weight: bolder;
    }
  }
}

::v-deep .el-form-item {
  .el-form-item__label {
    font-size: 14px;
    font-weight: initial;
  }

  .el-form-item__content {
    .el-input__inner {
      border-radius: 5px;
    }
  }
}

@media (max-width: 768px) {
  .el-main {
    margin: 0;
    height: 100vh;
  }

  .Visitdate {
    margin-top: 0;
  }

  .el-form-item__content {
    .el-select {
      width: 100%;
    }
  }

  ::v-deep .el-popper {
    left: 22px !important;
  }
}

@media (max-width: 1280px) {
}

@media (max-width: 1360px) {
}
</style>
